<style>

</style>
<template>
  <el-dialog
    title="项目Mock配置"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="clearForm">
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="saveData"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="项目" prop="appUuid">
        <el-select
          filterable
          clearable
          style="width: 300px"
          :disabled="saveData.id && saveData.id !==''"
          v-model="saveData.appUuid"
          placeholder="请选择项目">
          <el-option
            v-for="item in appOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="MockName" prop="mockName">
        <el-input :disabled="saveData.id && saveData.id !==''" v-model="saveData.mockName"></el-input>
      </el-form-item>
      <el-form-item label="配置描述">
        <el-input v-model="saveData.desc"></el-input>
      </el-form-item>
      <el-form-item label="请求方法" prop="method">
        <el-select
          filterable
          clearable
          style="width: 300px"
          v-model="saveData.method"
          placeholder="请选择方法">
          <el-option
            v-for="item in methodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="脚本类型" prop="scriptType">
        <el-select
          filterable
          clearable
          style="width: 300px"
          v-model="saveData.scriptType"
          placeholder="请选择脚本">
          <el-option
            v-for="item in scriptTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行脚本" prop="script">
        <el-input :rows="10" type="textarea" placeholder="请输入脚本" v-model="saveData.script"></el-input>
      </el-form-item>
      <el-form-item label="选择可选参数">
        <el-select
          filterable
          clearable
          style="width: 300px"
          @change="testJsonChange"
          v-model="mockTest"
          placeholder="请选择测试参数">
          <el-option
            v-for="item in mockTestOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="脚本测试参数">
        <el-input :rows="10" type="textarea" placeholder="请输入脚本测试参数(JSON格式)" v-model="scriptContentTest"></el-input>
      </el-form-item>
      <el-form-item v-if="debugResult" label="脚本测试结果">
        <div style="background-color: black;color:#FFD700;line-height: 20px!important;">
          <span>是否执行成功：{{ debugResult.success }}</span><br>
          <span>脚本类型：{{ debugResult.scriptType }}</span><br>
          <span v-if="debugResult.success"><span>实际执行结果：{{ debugResult.realResult }}</span><br></span>
          <span v-if="!debugResult.success">执行异常：{{ debugResult.exceptionMessage }}</span>
        </div>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
       <el-button type="warning" @click="debug">脚本测试</el-button>
    <el-button :disabled="!testPass" type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {loadAppMockCallTestSelector, loadAppSelector, loadScriptSelector} from "../../../api/loadSelectorApi";
import {mockCallDebug, saveAppMockCall, validateAppMockCallName} from "../../../api/appMockCallApi";

export default {
  name: "mockCallForm",
  filters: {},
  components: {},
  data() {
    const remoteValidateAppMockCallName = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let ret = await validateAppMockCallName(this.saveData.mockName);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("MockName不能重复"))
      }
    };
    return {
      debugResult: undefined,
      scriptContentTest: '',
      testPass: false,
      labelPosition: 'right',
      dialogVisible: false,
      appOptions: [],
      scriptTypeOptions: [],
      mockTestOptions: [],
      mockTest: '',
      methodOptions: [
        {
          label: 'GET',
          value: 'GET'
        },
        {
          label: 'POST',
          value: 'POST'
        }
      ],
      saveData: {
        appUuid: '',
        mockName: '',
        desc: '',
        scriptType: '',
        script: '',
        method: ''
      },
      rules: {
        mockName: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: remoteValidateAppMockCallName, trigger: 'blur'}
        ],
        script: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        method: [
          {required: true, message: '此项必填', trigger: 'change'},
        ],
        scriptType: [
          {required: true, message: '此项必填', trigger: 'change'},
        ],
        appUuid: [
          {required: true, message: '此项必填', trigger: 'change'},
        ],
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      vm.appOptions = await loadAppSelector()
      vm.scriptTypeOptions = await loadScriptSelector()
      vm.mockTestOptions = await loadAppMockCallTestSelector()
      if (data) {
        vm.saveData = vm.$cloneObj(data)
      }
      vm.dialogVisible = true
    },
    save() {
      let vm = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          await vm.doSave(this.saveData)
        }
      })
    },
    async doSave(saveData) {
      let vm = this
      let ret = await saveAppMockCall(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功!'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
      vm.clearForm()
      vm.$parent.query()
    },
    testJsonChange(value) {
      if (value) {
        this.scriptContentTest = value
      }
    },
    debug() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          if (!this.scriptContentTest || this.scriptContentTest.trim() === '') {
            this.$message({type: 'error', message: '测试json不能为空'});
            return
          }
          let ret = await mockCallDebug(this.saveData, this.scriptContentTest);
          if (ret.ok) {
            this.debugResult = ret.data.result
            this.testPass = this.debugResult.success
          } else {
            this.$message({type: 'error', message: '测试失败：' + ret.message});
          }
        }
      })
    },
    clearForm() {
      let vm = this
      try {
        vm.debugResult = undefined
        vm.testPass = false
        vm.scriptContentTest = ''
        vm.mockTest = ''
        vm.saveData = {
          appUuid: '',
          mockName: '',
          desc: '',
          scriptType: '',
          script: '',
          method: ''
        }
        vm.$refs['ruleForm'].resetFields()
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    },
  },
  watch: {}
}
</script>
